<template>
  <el-card class="pracard" v-model="queryFrom">
    <el-row :gutter="20" class="header_row">
      <el-col :span="4">
        <el-input placeholder="请输入场地查询" clearable v-model="queryFrom.query"></el-input>
      </el-col>
      <el-col :span="20">
        <el-button type="primary" :icon="Search" @click="initGetStudent">查询</el-button>
        <el-button type="primary" @click="handleDialogValue">添加</el-button>
        <p style="float: right">注：一个场地 只对应 一个科目</p>
      </el-col>
    </el-row>
    <div style="flex: 0.9">
      <el-table :data="tableData" stripe style="width: 100%" height="100%">
        <el-table-column :prop="item.prop" :label="item.label" v-for="(item,index) in pra_options" :key="index">
          <template v-slot="{row}" v-if="item.prop==='action'">
            <el-button size="small" type="primary" @click="handleDialogValue1(row)"><el-icon><Edit /></el-icon></el-button>
            <el-button size="small" type="danger" @click="DeleteOne(row.id)"><el-icon><Delete /></el-icon></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="flex: 0.1;margin-bottom: 2px">
      <el-pagination
          v-model:currentPage="queryFrom.pagenum"
          :page-sizes="[4, 8, 10, 14]"
          v-model:page-size="queryFrom.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </el-card>
  <Dialog v-model="addDialogVisible" :initGetStudents="initGetStudents"/>
  <Dialog1 v-model="updateDialogVisible" :DialogTableValue="DialogTableValue" :initGetStudents="initGetStudents"/>
</template>

<script setup>
import {ref} from "vue";
import { Search , Delete, Edit} from '@element-plus/icons-vue'
import {pra_options} from "@/views/admin/place/options";
import Dialog from '@/components/add/Apractise'
import Dialog1 from '@/components/update/Upractise'
import {ElMessage} from "element-plus";
import {deletePractiseById, getAllPlace, getAllPractise, getPlaceByPlace} from "@/api/practise";

// 添加,修改
const addDialogVisible=ref(false)
const updateDialogVisible=ref(false)
const DialogTableValue = ref({})
// 分页器
const total=ref(0)
const queryFrom = ref({
  query:'',
  pagenum:1,
  pagesize:8,
})

const tableData = ref([])

//查询全部
const initGetStudents = async ()=>{
  await getAllPlace({pageNum:queryFrom.value.pagenum,pageSize:queryFrom.value.pagesize}).then(res=>{
    // console.log(res)
    total.value=res.data.total
    tableData.value=res.data.list
  })
}
initGetStudents()

//删除
const DeleteOne = async (id) =>{
  await deletePractiseById(id).then(res=>{
    if(res.code===20021){
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
    }else {
      ElMessage({
        message: '删除失败',
        type: 'error',
      })
    }
    initGetStudents()
  })
}

//（练车场地）查询
const initGetStudent = async ()=>{
  if(queryFrom.value.query==null||queryFrom.value.query===''){
    await initGetStudents()
  }else {
    await getPlaceByPlace({pageNum:1,pageSize:99999,place:queryFrom.value.query}).then(res=>{
      // console.log(res)
      if(res.code===20041){
        ElMessage({
          message: '查询成功',
          type: 'success',
        })
        total.value=res.data.total
        tableData.value=res.data.list
      }else {
        ElMessage({
          message: '无查询结果',
          type: 'error',
        })
        total.value=res.data.total
        tableData.value=res.data.list
      }
    })
  }
}

const handleSizeChange=(pageSize)=>{
  queryFrom.value.pagenum=1
  queryFrom.value.pagesize=pageSize
  initGetStudents()
}
const handleCurrentChange=(pageNum)=>{
  queryFrom.value.pagenum=pageNum
  initGetStudents()
}
//添加，修改   弹窗
const handleDialogValue=()=>{
  addDialogVisible.value=true
}
const handleDialogValue1=(row)=>{
  updateDialogVisible.value=true
  DialogTableValue.value = JSON.parse(JSON.stringify(row))
}
</script>

<style scoped>
.pracard{
  flex: 1;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 5px 0 5px 0;
}
.header_row{
  padding-bottom: 16px;
  box-sizing: border-box;
}
:deep(.cell){
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
:deep(.el-card__body){
  flex: 1;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}
</style>